<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>李观炯</title>
        <link rel="stylesheet" href="./css/common.css">
        <link rel="stylesheet" href="./css/header.css">
        <link rel="stylesheet" href="./css/main.css">
    </head>
    <body>
        <!-- 头部 开始 -->
        <div class="header">
            <nav class="nav">
                <ul class="title">
                    <li>
                        <div class="img">
                        </div>
                        <span>首页</span>
                    </li>
                    <li>番剧</li>
                    <li>直播</li>
                    <li>邮箱中心</li>
                    <li>会员购</li>
                    <li>漫画</li>
                    <li>赛事</li>
                    <li>十佳</li>
                    <li>
                        <div class="img">
                        </div>
                        <span>下载客户端</span>
                    </li>
                </ul>
                <div class="search">
                    <div class="searchInputBox">
                        <input type="text" placeholder="这里是bilibili">
                        <div class="searchBtn">
                            <img src="./img/sou.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="person">
                    <div class="photo">
                    </div>
                    <ul class="list">
                        <li>
                            <div class="img">
                            </div>
                            大会员
                        </li>
                        <li>
                            <div class="img">
                            </div>
                            消息
                        </li>
                        <li>
                            <div class="img">
                            </div>
                            动态
                        </li>
                        <li>
                            <div class="img">
                            </div>
                            收藏
                        </li>
                        <li>
                            <div class="img">
                            </div>
                            历史
                        </li>
                        <li>
                            <div class="img">
                            </div>
                            创作中心
                        </li>
                    </ul>
                    <div class="send">
                        <div class="img"></div>
                        投稿
                    </div>
                </div>
            </nav>
            <div class="bili">
                <img src="./img/bili.png" alt="">
            </div>
        </div>
        <!-- 头部 结束 -->

        <!-- 主体 开始 -->
        <div class="main">
            <!-- 顶部 -->
            <div class="top-nav">
                <div class="left">
                    <div class="move">
                        <div>
                            <img src="./img/feng.png" alt="">
                        </div>
                        <span>动态</span>
                    </div>
                    <div class="move">
                        <div class="d2">
                            <img src="./img/hot.png" alt="">
                        </div>
                        <span>热门</span>
                    </div>
                    <div class="move">
                        <div class="d3">
                            <img src="./img/pind.png" alt="">
                        </div>
                        <span>频道</span>
                    </div>
                </div>
                <div class="center">
                    <ul class="u1">
                        <li>番剧</li>
                        <li>国创</li>
                        <li>综艺</li>
                        <li>动画</li>
                        <li>鬼畜</li>
                        <li>舞蹈</li>
                        <li>娱乐</li>
                        <li>科技</li>
                        <li>美食</li>
                        <li>汽车</li>
                        <li>运动</li>
                    </ul>
                    <ul class="u2">
                        <li>电影</li>
                        <li>电视剧</li>
                        <li>纪录片</li>
                        <li>游戏</li>
                        <li>音乐</li>
                        <li>影视</li>
                        <li>知识</li>
                        <li>资讯</li>
                        <li>生活</li>
                        <li>时尚</li>
                        <li>更多</li>
                    </ul>
                </div>
                <div class="right">
                    <ul class="u1">
                        <li>专栏</li>
                        <li>活动</li>
                        <li>社区中心</li>
                    </ul>
                    <ul class="u2">
                        <li>直播</li>
                        <li>课堂</li>
                        <li>新歌热榜</li>
                    </ul>
                </div>
            </div>
            <!-- *** -->
            <div class="by">
                <div class="top1">
                    <div class="by-left">
                        <ul>
                            <li>
                                <div class="img">
                                    <img src="./img/by-swiper/s1.webp" alt="">
                                </div>
                            </li>
                            <li></li>
                        </ul>
                        <div class="bot">
                            <div>真像大白，重获新生</div>
                            <div class="rig">
                                <div class="img">
                                    <img src="./img/by-swiper/zuo.png" alt="">
                                </div>
                                <div class="img">
                                    <img src="./img/by-swiper/you.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="by-right">
                        <ul class="ul">
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="./img/by-swiper/r1.webp" alt="">
                                </div>
                                <p class="p1">电影《我们的样子像极了爱情》周深主题曲《你的样子》MV 预售已开启</p>
                                <p class="p2">光线影业 · 22小时前</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="top2">
                    <div class="top2-nav">
                        <div class="img">
                            <img src="./img/by-top2/tui.png" alt="">
                        </div>
                        <span>推广</span>
                    </div>
                    <div class="top2-cont">
                        <ul class="ul2">
                            <li>
                                <div class="img">
                                    <img src="./img/by-top2/t1.webp" alt="">
                                </div>
                                <p class="p"><span class="sp1">广告</span>每天剪辑一小时，在家接单赚外快~</p>
                                <span class="sp2">up</span><span>中职通</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top2/t2.webp" alt="">
                                </div>
                                <p class="p"><span class="sp1">广告</span>每天剪辑一小时，在家接单赚外快~</p>
                                <span class="sp2">up</span><span>中职通</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top2/t3.webp" alt="">
                                </div>
                                <p class="p"><span class="sp1">广告</span>每天剪辑一小时，在家接单赚外快~</p>
                                <span class="sp2">up</span><span>中职通</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top2/t4.webp" alt="">
                                </div>
                                <p class="p"><span class="sp1"> 广告</span>每天剪辑一小时，在家接单赚外快~</p>
                                <span class="sp2">up</span><span>中职通</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top2/t5.webp" alt="">
                                </div>
                                <p class="p"><span class="sp1">广告</span>每天剪辑一小时，在家接单赚外快~</p>
                                <span class="sp2">up</span><span>中职通</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="top3">
                    <div class="top3-nav">
                        <div class="img">
                            <img src="./img/by-top3/jiang.png" alt="">
                        </div>
                        <span>赛事</span>
                    </div>
                    <div class="top3-cont">
                        <ul class="ul3">
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t1.webp" alt="">
                                </div>
                                <div class="living">
                                    <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                    <span>直播中</span>
                                </div>
                                <span>【直播】V5 vs LNG！</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t2.webp" alt="">
                                </div>
                                <div class="living">
                                    <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                    <span>直播中</span>
                                </div>
                                <span>【直播】上海EDG.M vs 杭州LGD大鹅</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t3.webp" alt="">
                                </div>
                                <div class="living">
                                    <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                    <span>直播中</span>
                                </div>
                                <span>2022年QQ飞车手游亚洲杯小组赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t4.webp" alt="">
                                </div>
                                <div class="living">
                                    <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                    <span>直播中</span>
                                </div>
                                <span>【重播】2022IVL夏季赛常规赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="living">
                                    <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                    <span>直播中</span>
                                </div>
                                <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="top4">
                    <div class="top4-nav">
                        <div class="left4">
                            <div class="img">
                                <img src="./img/by-top4/bo.png" alt="">
                            </div>
                            <span>直播</span>
                        </div>
                        <div class="right4">
                            <div>换一换</div>
                            <div>查看更多 ></div>
                            <p>
                                <span>直播排行</span>
                                <span>关注主播</span>
                                <span>为你推荐</span>
                            </p>
                        </div>
                    </div>
                    <div class="top4-cont">
                        <ul class="ul4">
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t1.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】V5 vs LNG！</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t2.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】上海EDG.M vs 杭州LGD大鹅</span>
                                </div> <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t3.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>2022年QQ飞车手游亚洲杯小组赛</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t4.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【重播】2022IVL夏季赛常规赛</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./img/by-top3/t5.webp" alt="">
                                </div>
                                <div class="flx">
                                    <div class="living">
                                        <img src="./img/by-top3/live.gif" width="12px" height="12px" alt="">
                                        <span>直播中</span>
                                    </div>
                                    <span>【直播】PEL夏季赛常规赛第六周Day2</span>
                                </div>
                                <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="top5">
                    <div class="top5-lft">
                        <div class="top5-nav">
                            <div class="left5">
                                <div class="img">
                                    <img src="./img/by-top5/bo.png" alt="">
                                </div>
                                <span>动画</span>
                            </div>
                            <div class="right5">
                                <div>换一换</div>
                                <div>查看更多 ></div>
                            </div>
                        </div>
                        <div class="top5-cont">
                            <ul class="ul5">
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t1.webp" alt="">
                                    </div>
                                    <p>
                                        “这场雨真的…来的太好了……”【将棋#129】
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">PEL和平精英职业联赛</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t2.webp" alt="">
                                    </div>
                                    <p>【4K修复】根本赢不了，我听不懂</p>
                                    <span class="sp1">up</span><span class="sp2">lorxia· 21小时前</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t3.webp" alt="">
                                    </div>
                                    <p>
                                        姫騎士リリア/Princess Knight Lilia/公主骑士莉莉娅 ed Stand up, Princess Knight - 小田ユウ
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">4K超清修复馆· 2021-10-26</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t4.webp" alt="">
                                    </div>
                                    <p>
                                        小绫华的一句王手，我直接损失七个648
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">梦境无恒· 7-19</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t4.webp" alt="">
                                    </div>
                                    <p>
                                        小绫华的一句王手，我直接损失七个648
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">梦境无恒· 7-19</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t4.webp" alt="">
                                    </div>
                                    <p>
                                        小绫华的一句王手，我直接损失七个648
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">带来欢乐的白鸽呀· 7-8</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t4.webp" alt="">
                                    </div>
                                    <p>
                                        小绫华的一句王手，我直接损失七个648
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">带来欢乐的白鸽呀· 7-8</span>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="./img/by-top5/t4.webp" alt="">
                                    </div>
                                    <p>
                                        小绫华的一句王手，我直接损失七个648
                                    </p>
                                    <span class="sp1">up</span><span class="sp2">带来欢乐的白鸽呀· 7-8</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top5-rgt">
                        <div class="rgt-nav">
                            <h3>排行榜</h3>
                            <div>
                                更多 >
                            </div>
                        </div>
                        <div class="cont">
                            <ul class="ul">
                                <li>
                                    <span class="sp1"><em>1</em></span>
                                    <img src="./img/by-top5/r1.webp" width="90" height="56" alt="">
                                    <div>
                                        <span class="sp2">泡泡糖机里有那些口味？那些up主在美国品尝过的 [猫和老鼠] 美食</span>
                                    </div>
                                </li>
                                <li>
                                    <span class="s2"><em>2</em></span>
                                    舅舅我啊，最喜欢二次元了！
                                </li>
                                <li>
                                    <span class="s3"><em>3</em></span>
                                    [我真是服了你这个老六 ]
                                </li>
                                <li>
                                    <span class="s4"><em>4</em></span>
                                    这 就 是 真 的 暑 假 吗？
                                </li>
                                <li>
                                    <span class="s4"><em>5</em></span>
                                    [海绵宝宝] 耍把戏
                                </li>
                                <li>
                                    <span class="s4"><em>6</em></span>
                                    [原神配音] 法外狂徒一一申鹤
                                </li>
                                <li>
                                    <span class="s4"><em>7</em></span>
                                [崩坏3] 少女，泳装，夏日时光！
                                </li>
                                <li>
                                    <span class="s4"><em>8</em></span>
                                    主线动画《明日方舟：黎明前奏》先导PV2
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体 结束 -->
        <!-- 底部开始 -->
        <footer class="footer">
            <div class="lft">
                <span>bilibili</span>
                <div class="biaoti">
                    <a href="">关于我们</a>
                    <a href="">联系我们</a>
                    <a href="">用户协议</a>
                    <a href="">加入我们</a>
                    <a href="">友情链接</a>
                    <a href="">友情链接</a>
                    <a href="">bilibili认证</a>
                    <a href="">Investor Relations</a>
                </div>
            </div>
            <div class="cen">
                <span>传送门</span>
                <div class="biaoti">
                    <a href="">协议汇总</a>
                    <a href="">活动中心</a>
                    <a href="">活动专题页</a>
                    <a href="">侵权申诉</a>
                    <a href="">帮助中心</a>
                    <a href="">社区中心</a>
                    <a href="">壁纸站</a>
                    <a href="">广告合作</a>
                    <a href="">名人堂</a>
                    <a href="">MCN管理中心</a>
                    <a href="">MCN管理中心</a>
                    <a href="">品牌号官网</a>
                </div>
            </div>
            <div class="rgt">
                <div>
                    <div class="img">
                        <img src="./img/footer/down.png" alt="">
                    </div>
                    <span>下载APP</span>
                </div>
                <div>
                    <div class="img">
                        <img src="./img/footer/aixin.png" alt="">
                    </div>
                    <span>公艺</span>
                </div>
                <div>
                    <div class="img">
                        <img src="./img/footer/wei.png" alt="">
                    </div>
                    <span>官方微博</span>
                </div>
                <div>
                    <div class="img">
                        <img src="./img/footer/wechat.png" alt="">
                    </div>
                    <span>官方微信</span>
                </div>
            </div>
        </footer>
        <!-- 底部结束 -->

    </body>
</html>
